"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
require("./style.less");
const icon_1 = require("./icon");
const config_1 = require("../config");
const ReactDom = require("react-dom");
const luban_class_1 = require("luban-class");
const utils_1 = require("../utils");
let initLeft;
let initTop;
const Modal = (_a) => {
    var props = __rest(_a, []);
    const { children, title, onRight, onCancel, onLeft, right, left, className, perfixCls, dragAble } = props;
    const mouseDown = React.useRef(false);
    const div = React.useRef(document.createElement('div'));
    const modalRef = React.useRef(null);
    const preGrid = React.useRef(null);
    React.useEffect(() => {
        document.body.appendChild(div.current);
        return () => {
            document.body.removeChild(div.current);
        };
    }, []);
    React.useEffect(() => {
        const up = () => {
            if (dragAble) {
                mouseDown.current = false;
                preGrid.current = null;
            }
        };
        document.addEventListener('mouseup', up);
        return () => {
            document.removeEventListener('mouseup', up);
        };
    }, []);
    React.useEffect(() => {
        const move = (e) => {
            if (mouseDown.current) {
                initLeft = modalRef.current.offsetLeft;
                initTop = modalRef.current.offsetTop;
                const modal = modalRef.current;
                if (!preGrid.current) {
                    preGrid.current = { x: e.clientX, y: e.clientY };
                }
                const diffX = e.clientX - preGrid.current.x;
                const diffY = e.clientY - preGrid.current.y;
                preGrid.current = { x: e.clientX, y: e.clientY };
                const height = modalRef.current.offsetHeight;
                const width = modalRef.current.offsetWidth;
                const winH = window.innerHeight;
                const winW = window.innerWidth;
                let top = initTop + diffY;
                let left = initLeft + diffX;
                //  32 是科天云项目
                if (top < height / 2 + 32) {
                    top = height / 2 + 32;
                }
                if (top + height / 2 > winH) {
                    top = winH - height / 2;
                }
                if (left < width / 2) {
                    left = width / 2;
                }
                if (left + width / 2 > winW) {
                    left = winW - width / 2;
                }
                modal.style.top = top + 'px';
                modal.style.left = left + 'px';
            }
        };
        const _move = utils_1.throttle(move, 50);
        document.addEventListener('mousemove', _move);
        return () => {
            document.removeEventListener('mousemove', _move);
        };
    }, []);
    const onLeftClick = (e) => {
        onLeft && onLeft(e);
    };
    const onRightClick = (e) => {
        onRight && onRight(e);
    };
    const onCancelClick = (e) => {
        onCancel && onCancel(e);
    };
    const classNames = luban_class_1.default(perfixCls, {
        [`${className}`]: className,
        [`${perfixCls}-nodrag`]: !dragAble,
        [`${perfixCls}-drag`]: dragAble,
    });
    const onMouseDragDown = (e) => {
        if (dragAble) {
            mouseDown.current = true;
        }
    };
    return ReactDom.createPortal(React.createElement("div", { className: classNames, ref: modalRef },
        React.createElement("div", { className: `${perfixCls}-core` },
            onCancel && React.createElement("i", { onClick: onCancelClick }, icon_1.default),
            title &&
                React.createElement("p", { className: `${perfixCls}-title`, onMouseDown: onMouseDragDown }, title),
            React.createElement("div", { className: `${perfixCls}-content` }, children),
            (left || right) && React.createElement("div", { className: `${perfixCls}-btns` },
                left && React.createElement("span", { onClick: onLeftClick, className: `${perfixCls}-left` }, left),
                right && React.createElement("span", { onClick: onRightClick, className: `${perfixCls}-right` }, right)))), div.current);
};
Modal.defaultProps = {
    perfixCls: `${config_1.prefix}-modal`
};
exports.default = Modal;
